<template>
  <div class="areaIndexCheck">
    <el-breadcrumb separator="/" style="font-size:16px;height:30px;">
      <el-breadcrumb-item :to="{ path: '/expandCustomerIndexCheck' }">拓客指标考核</el-breadcrumb-item>
      <el-breadcrumb-item>{{areaName}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="片区：" size="small">
        <el-select v-model="regionId" placeholder="全部" filterable clearable>
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item,index) in regionIdList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleClick" size="small" id="monitorEnter">查询</el-button>
        <el-button type size="small" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="total">
        <div class="total1">
            {{total.then}}
        </div>
        <div>
            <span class="tot1">
                <span>{{standardType == 1?'拜访量':'拓店量'}}指标：</span>
                <span>{{total.atPlan}}</span>
            </span>
            <span class="tot2">
                <span>实际完成指标：</span>
                <span>{{total.atReal}}</span>
            </span>
            <span>
                <span>完成率：</span>
                <span>{{total.atPercentage}}</span>
            </span>
        </div>
    </div>
    <div>
      <el-button type="success" size="small" @click="exportList">导出</el-button>
    </div>
    <div class="tal">
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column align="center" fixed label="区域" width="120">
          <el-table-column align="center" fixed label="--" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleArea(scope.row.regionId,scope.row.regionName)">{{scope.row.regionName}}</el-button>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="standardType" label="指标" width="120">
          <el-table-column align="center" prop="standardType" label="--" width="120">
            <template slot-scope="scope">{{scope.row.standardType == 1?'拜访量':'拓店量'}}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="asyear" label="年份" width="120">
          <el-table-column align="center" prop="asyear" label="--" width="120"></el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="yearDefe"
          label="本年剩余完成量"
          width="130"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="yearDefe"
            label="--"
            width="130"
            :formatter="moneyFormatter"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="city"
          :label="`${mouth}`"
          width="180"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="city"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.atReal}}/{{scope.row.atPlan}}/{{scope.row.atPercentage=='1.0%'?'100%':scope.row.atPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="money"
          label="1月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="money"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.januaryReal}}/{{scope.row.januaryPlan}}/{{scope.row.januaryPercentage=='1.0%'?'100%':scope.row.januaryPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="2月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.februaryReal}}/{{scope.row.februaryPlan}}/{{scope.row.februaryPercentage=='1.0%'?'100%':scope.row.februaryPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="3月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.marchReal}}/{{scope.row.marchPlan}}/{{scope.row.marchPercentage=='1.0%'?'100%':scope.row.marchPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="4月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.aprilReal}}/{{scope.row.aprilPlan}}/{{scope.row.aprilPercentage=='1.0%'?'100%':scope.row.aprilPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="5月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.mayReal}}/{{scope.row.mayPlan}}/{{scope.row.mayPercentage=='1.0%'?'100%':scope.row.mayPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="6月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.juneReal}}/{{scope.row.junePlan}}/{{scope.row.junePercentage=='1.0%'?'100%':scope.row.junePercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="7月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.julyReal}}/{{scope.row.julyPlan}}/{{scope.row.julyPercentage=='1.0%'?'100%':scope.row.julyPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="8月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.augustReal}}/{{scope.row.augustPlan}}/{{scope.row.augustPercentage=='1.0%'?'100%':scope.row.augustPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="9月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.septemberReal}}/{{scope.row.septemberPlan}}/{{scope.row.septemberPercentage=='1.0%'?'100%':scope.row.septemberPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="10月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.octoberReal}}/{{scope.row.octoberPlan}}/{{scope.row.octoberPercentage=='1.0%'?'100%':scope.row.octoberPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="11月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.novemberReal}}/{{scope.row.novemberPlan}}/{{scope.row.novemberPercentage=='1.0%'?'100%':scope.row.novemberPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="zip"
          label="12月份"
          width="120"
          :formatter="moneyFormatter"
        >
          <el-table-column
            align="center"
            prop="zip"
            label="实际｜计划｜完成率"
            width="180"
            :formatter="moneyFormatter"
          >
          <template slot-scope="scope">
            {{scope.row.decemberReal}}/{{scope.row.decemberPlan}}/{{scope.row.decemberPercentage=='1.0%'?'100%':scope.row.decemberPercentage}}
          </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.pageNum"
        :page-size="pageData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, sizes, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import util from "@/common/utils";
import api from "@/api/apiPath"
export default {
  name: "areaIndexCheck",
  data() {
    return {
      mouth: "",
      regionId: "",
      regionIdList: [],
      pageData: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      totalSize: 0,
      areaId:'',
      areaName:'',
      standardType:'',
      year:'',
      total:{}
    };
  },
  components: {},
  computed: {},
  mounted() {},
  created() {
    let row = ''
    if(this.$route.query.row){
      row = JSON.parse(this.$route.query.row)
      this.areaId = row.areaId
      this.areaName = row.areaName
      this.standardType = row.standardType
      this.year = row.year.slice(0,4)
      window.sessionStorage.setItem('row',this.$route.query.row)
    }else if(window.sessionStorage.getItem('row')){
      row = JSON.parse(window.sessionStorage.getItem('row'))
      this.areaId = row.areaId
      this.areaName = row.areaName
      this.standardType = row.standardType
      this.year = row.year.slice(0,4)
    }
    this.mouth = "1月-" + (new Date().getMonth() + 1) + "月汇总";
    this.getRegionList()
    this.onSubmit()
    this.getTotal()
  },
  methods: {
    moneyFormatter(row, column, cellValue, index) {
      if (cellValue) {
        return cellValue.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      } else {
        return cellValue
      }
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.pageData.pageNum = val
      this.onSubmit()
    },
    // 汇总
    getTotal(){
      this.$axios.post('/spread/enaluate/enaluateThenArea',{
        year:this.year,
        areaId:this.areaId,
        standardType:this.standardType
      }).then(res=>{
        console.log(res);
        this.total = res
        if(this.total.atPercentage == '1.0%'){
          this.total.atPercentage = '100%'
        }
      })
    },
    //  片区数据
    getRegionList() {
      this.$axios.get("/cms/sys/region/getRegion/"+this.areaId).then(res => {
        this.regionIdList = res;
      });
    },
    handleClick(){
      this.pageData.pageNum = 1
      this.onSubmit()
    },
    onSubmit() {
      this.$axios
        .post("spread/enaluate/enaluateRegion", {
          areaId:this.areaId,
          year:this.year,
          regionId: this.regionId,
          standardType:this.standardType,
          pageSize:this.pageData.pageSize,
          pageNum:this.pageData.pageNum
        })
        .then(res => {
          console.log(res);
          
          this.tableData = res.list
          this.totalSize = res.total
        });
    },
    //   重置
    handleReset() {
      this.regionId = "";
    },
    handleArea(val1,val2) {
      this.$router.push({
        path: "/personalIndexCheck",
        query: {
          regionId:val1,
          regionName:val2,
        }
      });
    },
    //导出
    exportList() {
      let param = {
        areaId:this.areaId,
        year:this.year,
        regionId: this.regionId,
        standardType:this.standardType,
      };
      let url = api.domain + '/spread/enaluate/enaluateRegionPut'
      this.axios({
        method: "post",
        url: url,
        data: param,
        headers: {
          "content-type": "application/json; charset=utf-8",
          token: sessionStorage.getItem("cmsUser")
            ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
            : ""
        },
        responseType: "blob"
      })
        .then(res => {
          this.downloadFile(res.data);
        })
        .catch(res => {
          //全局拦截器原因,返回参数为catch'
          this.downloadFile(res.data);
        });
    },
    downloadFile(data) {
      if(!data){
          this.$message({
              message: "导出错误",
              type: "warning"
          });
          return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      let fileName = `导出${util.getTimeString(new Date())}.xls`;
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      this.$message({
        message: "导出成功",
        type: "success"
      });
    }
  }
};
</script>

<style lang='stylus' scoped>
.areaIndexCheck {
  .el-form-item {
    vertical-align: middle;
  }

  .tal, .pagination {
    margin-top: 20px;
  }

  .total {
    border: 1px solid #DCDFE6;
    margin-bottom: 20px;
    padding: 20px;
  }

  .total1 {
    margin-bottom: 20px;
  }

  .tot1, .tot2 {
    margin-right: 50px;
  }
}
</style>